<template>
  <div class="no7">
    <div>
      <div style="padding-bottom:20px;">
        <p style="font-size:14px;padding-bottom:5px;">联系我们</p>
        <p style="font-size:12px; padding:2px 0px;">CONTACT</p>
      </div>
      <div style="padding:7px 0px 30px 0px;font-size:14px;line-height:36px;">
        <p>
          地址：苏州市工业园区金鸡湖大道00号零零大厦00号
          <br />电话：400-1000-000
          <br />传真：0500-60005000
          <br />邮箱：qfy_email@aa.com
        </p>
      </div>
      <div class="vbv">
        <p style="float:left;margin-right:10px;">分享到:</p>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
      </div>
      <div style="padding:4px 0px;">
        <input
          type="text"
          style="width:100%;border-bottom:1px solid #fff;line-height:50px; color:#fff;"
          placeholder="姓名"
        />
      </div>
      <div style="padding:4px 0px;">
        <input
          type="text"
          style="width:100%;border-bottom:1px solid #fff;line-height:50px; color:#fff;"
          placeholder="电话"
        />
      </div>
      <div style="padding:4px 0px;">
        <input
          type="text"
          style="width:100%;border-bottom:1px solid #fff;line-height:50px; color:#fff;"
          placeholder="邮箱"
        />
      </div>
      <div style="padding:4px 0px 20px 0px;">
        <div
          contenteditable="true"
          style="width:100%;border-bottom:1px solid #fff; min-height:50px; color:#fff;"
        >内容</div>
      </div>
      <div style="padding:4px 0px;height:38px;line-height:38px;">
        <span
          style="display: inline-blocktext-align: center; padding: 10px 40px;background: #3ec9ad;border: 1px solid #3ec9ad;box-sizing: border-box;"
        >提交</span>
      </div>
      <div class="mhs">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
      </div>
      <div style="width:100%;height:80px;">

      </div>
    </div>
  </div>
</template>

<style scoped>
.no7 {
  background-image: url(https://ccdn.goodq.top/caches/31d77848c79d76c10027e5f47157bcf2/aHR0cHM6Ly81NzVlNWIzNWM0ZWU3LnQ3My5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMTcvMDUvYmYwMzM5ODYxODNjMWIxZjFhMTljMjliNTg2Y2Q1OTQuanBn.m.jpg);
  background-repeat: no-repeat;
  background-size: auto 100%;
  color: #fff;
}
.no7 > div {
  padding: 20px 15px 46px 15px;
  box-sizing: border-box;
  background: rgba(0, 0, 0, 0.4);
}
.vbv {
  overflow: hidden;
  padding: 2px 0px 40px 0px;
}
.vbv > div {
  float: left;
  width: 16px;
  height: 16px;
  margin-right: 10px;

  background-repeat: no-repeat;
}
.vbv > div:nth-of-type(1) {
  background: url(https://f.goodq.top/FeiEditor/images/icon/social_icon_16x16.png);
  background-position-y: -32px;
}
.vbv > div:nth-of-type(2) {
  background: url(https://f.goodq.top/FeiEditor/images/icon/social_icon_16x16.png);
  background-position-x: -64px;
  background-position-y: -32px;
}
.vbv > div:nth-of-type(3) {
  background: url(https://f.goodq.top/FeiEditor/images/icon/social_icon_16x16.png);
  background-position-x: -128px;
  background-position-y: -32px;
}
.vbv > div:nth-of-type(4) {
  background: url(https://f.goodq.top/FeiEditor/images/icon/social_icon_16x16.png);
  background-position-x: -96px;
  background-position-y: -32px;
}
.vbv > div:nth-of-type(5) {
  background: url(https://f.goodq.top/FeiEditor/images/icon/social_icon_16x16.png);
  background-position-x: -160px;
  background-position-y: -32px;
}
input {
  background: none;
  outline: none;
  border: none;
}

.mhs {
  padding-top: 30px;
  overflow: hidden;
}
.mhs>div{
    float: left;
    width: 16px;
    height:16px;
    margin-right: 20px;
    
}
.mhs>div:nth-of-type(1){
    background: url(https://f.goodq.top/FeiEditor/images/icon/social_icon_16x16.png);
    background-repeat: no-repeat;
    background-position-y: -96px;
}
.mhs>div:nth-of-type(2){
    background: url(https://f.goodq.top/FeiEditor/images/icon/social_icon_16x16.png);
    background-repeat: no-repeat;
    background-position-x: -16px;
    background-position-y: -96px;
}
.mhs>div:nth-of-type(3){
    background: url(https://f.goodq.top/FeiEditor/images/icon/social_icon_16x16.png);
    background-repeat: no-repeat;
    background-position-x: -128px;
    background-position-y: -96px;
}
.mhs>div:nth-of-type(4){
    background: url(https://f.goodq.top/FeiEditor/images/icon/social_icon_16x16.png);
    background-repeat: no-repeat;
    background-position-x: -64px;
    background-position-y: -96px;
}
.mhs>div:nth-of-type(5){
    background: url(https://f.goodq.top/FeiEditor/images/icon/social_icon_16x16.png);
    background-repeat: no-repeat;
    background-position-x: -80px;
    background-position-y: -96px;
}
</style>